<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>岁草网</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/comm.css"/>

</head>
<body>
<header>
    
</header>
   <div id="app">
    <iframe src="header.html" frameborder="0" class="my_header" scrolling="no"></iframe>
        <div class="container-fluid">
            <div class="row w-100">
                <!-- 左侧-->
                <div class="col-md-2 col-sm-0 pl-5 pr-4" id="left">
                    <div >
                        <ul class="list-unstyled list-group " class="itemList">
                            <li class="list-group-item"><a href="javascript:;" class="text-dark" @click="indexlist(1)">最新话题</a></li>
                            <li class="list-group-item"><a href="javascript:;" class="text-dark" @click="indexlist(2)">推荐阅读</a></li>
                            <li class="list-group-item"><a href="javascript:;" class="text-dark" @click="indexlist(3)">点赞热门</a></li>
                        </ul>
                    </div>
                    
                </div>
                <div class="col-lg-10 col-sm-12">
                    <div class="row w-100">
                        <!-- 中间-->
                        <div class="col-md-8 col-sm-12 " id="middle">
                            <div class="col-12 border-bottom d-flex justify-content-between">
                                <div><h4 class="text-dark">{{title}}</h4></div>
                                <div class="text-secondary pt-1"><span>一天内发布：{{day}}篇</span>&nbsp;<span>一个月内更新：{{month}}篇</span></div>
                            </div>
                            <div class="col-12  " v-for="plant in plants" ::key="plant.author_id" id="carList">
                                <div class="media p-sm-3 w-100 carList">
                                    <img :src="plant.image_path" alt="图片丢了" class="mr-4"/>
                                    <div class="media-body">
                                        <a :href="`detail.html?id=`+plant.plant_id">
                                            <h5>{{plant.title}}</h5>
                                        </a>
                                        <p>{{plant.text}}</p>
                                        <div class="d-flex justify-content-between">
                                            <p class="text-muted">
                                                <span class="text-success">{{plant.posted_date}}</span>&nbsp;<span>/</span>&nbsp;阅读({{plant.read_count}})
                                            </p>
                                            <div>点赞（{{plant.like_count}}）</div>
                                        </div>
    
                                    </div>
                                </div>
                            </div>
                            
                            <button class="btn bg-success mt-3 float-right text-white " @click="nextPage" v-if="isShowNext">下一页</button>
                            <div v-for="i in pageList">
                                <span 
                                    class="btn mt-3 float-left text-white ml-2"
                                    :class="page==i?'bg-danger':'bg-success'"
                                    @click="checkPage(i)"
                                    >{{i}}</span>
                            </div>
                            <button class="btn bg-success mt-3 float-right text-white mr-3" @click="checkPage(1)" >首页</button>
                            <button class="btn bg-success mt-3 float-right text-white mr-3" @click="checkPage(totalPage)" >尾页</button>
                            <button class="btn bg-success mt-3 float-right text-white mr-3" @click="previousPage" v-if="isShowPre">上一页</button>
                           
                        </div>
                        <!-- 右侧-->
                        <div class="col-md-4 col-sm-0" id="right">
                           
                            <div class=" text-center mt-2 hot" >
                                <div class="col-12  text-left mt-2">
                                    <h5 class="text-dark" >热门阅读</h5>
                                </div>
                                <div class="col-12 " v-for="plant in hots" >
                                    <div class="media m-2 w-100 border-bottom pb-2">
                                        <img :src="plant.image_path" alt="图片丢了" />
                                        <div class="media-body">
                                            <a href="javascript:;" :href="`detail.html?id=`+plant.plant_id">
                                                <p>{{plant.title}}</p>
                                            </a>
                                            <p class="text-muted">
                                                <span class="text-success">{{plant.posted_date}}</span>&nbsp;<span>/</span>&nbsp;阅读({{plant.read_count}})
                                            </p>
                                        </div>
                                    </div>
    
                                </div>
                                
                               
                            </div>
                            <!-- 热门话题-->
                            <div class=" text-center mt-2 topic">
                                <div class="col-12 border-bottom text-left mt-2">
                                    <h5 class="text-dark">热门话题</h5>
                                </div>
                                <div class="row p-2" >
                                    <div class="col-lg-4 col-sm-6 " v-for="key in Object.keys(hotTopic)" :key="key">
                                        <div class="bg-light m-1" >
                                            <a :href="`list.html?search=`+key" class=" text-muted" @click="searchTopic(key)"> {{key}}</a>
                                        </div>
                                    </div>
                                    
                                </div>
                                <div class="col-12 border-bottom text-left mt-2">
                                    <h5 class="text-dark">分类</h5>
                                </div>
                                <div class="row p-2" >
                                    <div class="col-lg-4 col-sm-6 " v-for="item in types" >
                                        <div class="bg-light m-1" >
                                            <a :href="`list.html?type=`+item.type_number" class=" text-muted"> {{item.type_name}}</a>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                           
                            
                        </div>
                    </div>
                </div>
            </div>
            <a id="up_top" href="#">↑</a>
            <!-- 最下方-->
            <div class="row my-4">
                <div class="text-center w-100">
                Copright&nbsp;&copy;&nbsp;2012-2015&nbsp;岁草SUICAO.COM
                </div>
            </div>
        </div>
   </div>
</body>
<script>
   new Vue({
        el: "#app",
        data: {
            hello:"hello world",
            // 植物文章列表
            plants:{
                "0": {
                    "author_id": 1,
                    "description": "多肉植物是近年来非常受欢迎的室内植物之一，它们有着丰富的品种和独特的形态...",
                    "image_path": "https://taritari-1306000991.cos.ap-chengdu.myqcloud.com/botany/1.jpg",
                    "like_count": 45,
                    "plant_id": 1,
                    "posted_date": "2023-01-15 10:30:00",
                    "read_count": 2500,
                    "title": "多肉植物养护指南"
                }
            },
            page:1,// 分页，页数
            isShowPre:false,// 控制上一页下一页是否显示
            total:"",// 总条数，计算分页
            totalPage:0,// 计算得出总页数
            isShowNext:true,// 控制上一页下一页是否显示
            pageList:[],// 文章页数栏的列表
            index:1,// 空值主页显示的内容（最新话题，推荐阅读，点赞热门）
            title:"最新话题",// 控制中间表头显示
            hots:[],// 热门内容存放列表
            day:0,// 获取一天之内新增
            month:0,// 获取一月之内新增
            hotTopic:{},//热门标签表
            types:[]// 分类
        },
        //网页一进来就调用
        created() {
            this.getTypes()
            this.getPlantsData()//获取主页面数据
            this.getPlantCount()//获取总条数
            this.hotTop5()//获取热门文章排行
            this.getAddNumber()//获取新增数量
            this.getHotTopic()//获取热门标题
        },
       
        // 方法全部写在这
        methods: {
            // 点击话题的时候（暂没用）
            searchTopic(topic){
                console.log(topic)
                sessionStorage.setItem('search',topic)
            },
            //获取所有分类
            async getTypes(){
                try {
                        // 使用fetch发起GET请求
                        const response = await fetch('http://localhost:5000/type/list');
                        const data = await response.json();
                        // 请求成功时更新热门列表数据
                        this.types = data.data
                        
                    } catch (error) {
                        // 请求失败时处理错误
                        console.error('Error fetching data:', error);
                        
                    }
            },
            // 获取热门话题
            async getHotTopic(){
                try {
                        // 使用fetch发起GET请求
                        const response = await fetch('http://localhost:5000/plants/hotTopic');
                        const data = await response.json();
                        // 请求成功时更新热门话题数据
                        this.hotTopic = data.data
                    } catch (error) {
                        // 请求失败时处理错误
                        console.error('Error fetching data:', error);
                        
                    }
            },
            // 获取新增数量
            async getAddNumber(){
                try {
                        // 使用fetch发起GET请求
                        const response = await fetch('http://localhost:5000/plants/getAddNumber');
                        const data = await response.json();
                        // 请求成功时更新天统计和月统计
                        this.day = data.data[0]["number"]
                        this.month = data.data[1]["number"]
                    } catch (error) {
                        // 请求失败时处理错误
                        console.error('Error fetching data:', error);
                        
                    }
            },
            // 热门top5
            async hotTop5(){
                try {
                        // 使用fetch发起GET请求
                        const response = await fetch('http://localhost:5000/plants/hot');
                        const data = await response.json();
                        // 请求成功时更新热门列表数据
                        this.hots = data.data
                        
                    } catch (error) {
                        // 请求失败时处理错误
                        console.error('Error fetching data:', error);
                        
                    }
            },
            // maxPage 最大页数的锁定
            maxPage(){
                this.pageList = [];
                // 锁定页数栏不能超过7个
                for(var i= this.page;i<this.page+7;i++){
                    
                    if(i>=this.totalPage){
                        this.pageList = this.pageList
                    }else{
                        this.pageList.push(i);
                    }
                    
                }
               
            },
            // 点击切换页数
            checkPage(page){
                // 获取传入的页数
                this.page = page;
                // 请求该页数的数据
                this.getPlantsData()
                // 判断是否到最后一页了
                if(this.page == this.totalPage) {
                    this.isShowNext = false
                    this.isShowPre = true
                } 
                // 判断是否都第一页了
                if(this.page == 1) {
                    this.isShowPre = false
                    this.isShowNext = true
                } 
                // 变更页数列表
                this.maxPage()
            },
            // 点击下一页
            nextPage(){
                // 点击下一页的时候运行页数+1
                this.page += 1;
                // 获取下一页的数据
                this.getPlantsData()
                // 判断是否到最大页数或者第一页
                if(this.page>1){
                    this.isShowPre = true
                }
                if(this.page == this.totalPage){
                    console.log("最大页数了")
                    this.isShowNext = false
                }
                // 变更页数栏的数据
                this.maxPage()
            },
            //点击上一页
            previousPage(){
                // 点击上一页的时候运行页数-1
                this.page -= 1;
                // 获取上一页的数据
                this.getPlantsData()
                 // 判断是否到最大页数或者第一页
                if(this.page==1){
                    this.isShowPre = false
                }
                if(this.isShowNext == false){
                    this.isShowNext = true
                }
                  // 变更页数栏的数据
                this.maxPage()
            },
            // 获取主列表数据
            async getPlantsData() {
                // 最新话题
               if(this.index==1){
                    try {
                        // 使用fetch发起GET请求
                        const response = await fetch('http://localhost:5000/plants/plants?page='+this.page);
                        const data = await response.json();
                        // 请求成功时更新主列表数据
                        this.plants = data.data;
                        this.title="最新话题"
                    } catch (error) {
                        // 请求失败时处理错误
                        console.error('Error fetching data:', error);
                        
                    }
                // 推荐阅读
               }else if(this.index==2){
                    try {
                            // 使用fetch发起GET请求
                            const response = await fetch('http://localhost:5000/plants/getAllByRead?page='+this.page);
                            const data = await response.json();
                            // 请求成功时更新数据
                            this.plants = data.data;
                            this.title="推荐阅读"
                        } catch (error) {
                            // 请求失败时处理错误
                            console.error('Error fetching data:', error);
                            
                        }
                // 点赞热门
                }else if(this.index==3){
                    try {
                            // 使用fetch发起GET请求
                            const response = await fetch('http://localhost:5000/plants/getAllByLike?page='+this.page);
                            const data = await response.json();
                            // 请求成功时更新数据
                            this.plants = data.data;
                            this.title="点赞热门"
                        } catch (error) {
                            // 请求失败时处理错误
                            console.error('Error fetching data:', error);
                            
                        }
                }
            },
            // 获取总条数
            async getPlantCount() {
                const response = await fetch('http://localhost:5000/plants/getCount');
                const data = await response.json();
                this.total =data.data
                // 总条数除5（每页显示5个，计算最大页数）
                this.totalPage = Math.ceil(this.total/5)
                this.maxPage()
            },
            //主页显示内容(切换最新话题，推荐阅读和点赞热门)
            indexlist(opt){
                // 切换传入opt进行区分
                this.index = opt
                // 页数回到1页
                this.page = 1
                // 重新获取总条数和页面数据
                this.getPlantsData()
                this.getPlantCount()
            }
           
        },
        beforeDestroy() {
         
        },
    })
  </script>
</html>